import { useCallback, useEffect, useMemo, useState } from "react";

function EffectComponent() {
  //   const [count, setCount] = useState(0);
  //   const [obj, setObj] = useState({ name: "张三", age: 18 });
  //   // 监听值类型
  //   useEffect(() => {
  //     console.log("count发生变化:", count);
  //   }, [count]);
  //   // 监听引用类型
  //   useEffect(() => {
  //     console.log("obj发生变化:", obj);
  //   }, [obj]);
  //   return (
  //     <>
  //       <div>
  //         <p>count: {count}</p>
  //         <button onClick={() => setCount(count + 1)}>增加count</button>
  //       </div>
  //       <div>
  //         <p>name: {obj.name}</p>
  //         <p>age: {obj.age}</p>
  //         <button onClick={() => setObj({ ...obj, age: obj.age + 1 })}>
  //           增加年龄
  //         </button>
  //       </div>
  //     </>
  //   );
  // const [count, setCount] = useState(0);
  // // 使用 useMemo 缓存计算结果
  // const expensiveValue = useMemo(() => {
  //   console.log("Calculating expensive value...");
  //   return count * 2;
  // }, [count]);
  // useEffect(() => {
  //   console.log("Effect is running with expensive value:", expensiveValue);
  // }, [expensiveValue]);
  // return (
  //   <div>
  //     <p>Count: {count}</p>
  //     <p>Expensive Value: {expensiveValue}</p>
  //     <button onClick={() => setCount(count + 1)}>Increment</button>
  //   </div>
  // );
  //   const [count, setCount] = useState(0);
  //   // 不使用 useMemo,每次渲染都会重新计算
  //   const expensiveValue = (() => {
  //     console.log("Calculating expensive value...");
  //     return count * 2;
  //   })();
  //   useEffect(() => {
  //     console.log("Effect is running with expensive value:", expensiveValue);
  //   }, [expensiveValue]);
  //   return (
  //     <div>
  //       <p>Count: {count}</p>
  //       <p>Expensive Value: {expensiveValue}</p>
  //       <button onClick={() => setCount(count + 1)}>Increment</button>
  //     </div>
  //   );

  // const [count, setCount] = useState(0);

  // // 使用 useCallback 缓存函数
  // const handleClick = useCallback(() => {
  //   setCount(count + 1);
  // }, [count]);

  // useEffect(() => {
  //   console.log("Effect is running with handleClick");
  // }, [handleClick]);

  // return (
  //   <div>
  //     <p>Count: {count}</p>
  //     <button onClick={handleClick}>Increment</button>
  //   </div>
  // );

  //   const [count, setCount] = useState(0);

  //   // 不使用 useCallback,每次渲染都会创建新的函数引用
  //   const handleClick = () => {
  //     // setCount(count + 1);
  //     console.log("handleClick");
  //   };

  //   // 由于handleClick在每次渲染时都是新的函数引用
  //   // 这会导致useEffect在每次渲染时都执行
  //   // 即使count没有改变
  //   // 一般不建议在useEffect的依赖数组中放入函数
  //   // 除非这个函数是通过props传入的,或者需要在函数变化时执行副作用
  //   // 比如:监听父组件传入的回调函数的变化
  //   // 或者这个函数是通过useCallback缓存的
  //   useEffect(() => {
  //     console.log("Effect is running with handleClick");
  //   }, [handleClick]); // 这里会导致每次渲染都执行,因为handleClick每次都是新的引用

  //   return (
  //     <div>
  //       <p>Count: {count}</p>
  //       <button onClick={handleClick}>Increment</button>
  //     </div>
  //   );

  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);
  const [countC, setCountC] = useState(0);
  const [countD, setCountD] = useState(0);
  const [countE, setCountE] = useState(0);

  // 当A为某值时，触发B的逻辑，
  // A B同时为某值时，触发C逻辑，
  // A B C同时为某值时，触发D逻辑，
  // A B C D同时为某值时，触发E逻辑
  //   useEffect(() => {
  //     // 当A为10时，设置B为20
  //     if (countA === 10) {
  //       setCountB(20);
  //     }
  //   }, [countA]);

  //   useEffect(() => {
  //     // 当A为10且B为20时，设置C为30
  //     if (countA === 10 && countB === 20) {
  //       setCountC(30);
  //     }
  //   }, [countA, countB]);

  //   useEffect(() => {
  //     // 当A为10且B为20且C为30时，设置D为40
  //     if (countA === 10 && countB === 20 && countC === 30) {
  //       setCountD(40);
  //     }
  //   }, [countA, countB, countC]);

  //   useEffect(() => {
  //     // 当A为10且B为20且C为30且D为40时，设置E为50
  //     if (countA === 10 && countB === 20 && countC === 30 && countD === 40) {
  //       setCountE(50);
  //     }
  //   }, [countA, countB, countC, countD]);

  //   useEffect(() => {
  //     // 使用一个useEffect来处理所有的连锁反应
  //     if (countA === 10) {
  //       setCountB(20);
  //       if (countB === 20) {
  //         setCountC(30);
  //         if (countC === 30) {
  //           setCountD(40);
  //           if (countD === 40) {
  //             setCountE(50);
  //           }
  //         }
  //       }
  //     }
  //   }, [countA, countB, countC, countD]);

//   const memoizedB = useMemo(() => {
//     if (countA === 10) return 20;
//     return countB;
//   }, [countA]);

//   const memoizedC = useMemo(() => {
//     if (countA === 10 && countB === 20) return 30;
//     return countC;
//   }, [countA, countB]);

//   const memoizedD = useMemo(() => {
//     if (countA === 10 && countB === 20 && countC === 30) return 40;
//     return countD;
//   }, [countA, countB, countC]);

//   const memoizedE = useMemo(() => {
//     if (countA === 10 && countB === 20 && countC === 30 && countD === 40) return 50;
//     return countE;
//   }, [countA, countB, countC, countD]);

//   if (memoizedB !== countB) setCountB(memoizedB);
//   if (memoizedC !== countC) setCountC(memoizedC);
//   if (memoizedD !== countD) setCountD(memoizedD);
//   if (memoizedE !== countE) setCountE(memoizedE);

  useEffect(() => {
    // 使用一个useEffect来处理所有的连锁反应
    // 使用平级的if语句来提高可读性
    if (countA === 10) {
      setCountB(20);
    }
    if (countA === 10 && countB === 20) {
      setCountC(30);
    }
    if (countA === 10 && countB === 20 && countC === 30) {
      setCountD(40);
    }
    if (countA === 10 && countB === 20 && countC === 30 && countD === 40) {
      setCountE(50);
    }

    // 或者使用哈希表方式
    // const conditions = {
    //   B: { value: 20, requires: { A: 10 } },
    //   C: { value: 30, requires: { A: 10, B: 20 } },
    //   D: { value: 40, requires: { A: 10, B: 20, C: 30 } },
    //   E: { value: 50, requires: { A: 10, B: 20, C: 30, D: 40 } }
    // };

    // Object.entries(conditions).forEach(([key, config]) => {
    //   const allConditionsMet = Object.entries(config.requires).every(
    //     ([reqKey, reqValue]) => eval(`count${reqKey}`) === reqValue
    //   );
    //   if (allConditionsMet) {
    //     eval(`setCount${key}(${config.value})`);
    //   }
    // });

    // 遍历每个条件配置
    // Object.entries(conditions).forEach(([targetKey, targetConfig]) => {
    //   // 获取当前目标的所有前置条件
    //   const requirements = targetConfig.requires;
      
    //   // 检查每个前置条件是否满足
    //   let areAllRequirementsMet = true;
    //   for (const [requiredKey, requiredValue] of Object.entries(requirements)) {
    //     // 获取当前检查的count值
    //     const currentCount = requiredKey === 'A' ? countA :
    //                        requiredKey === 'B' ? countB :
    //                        requiredKey === 'C' ? countC :
    //                        requiredKey === 'D' ? countD : 
    //                        countE;
                           
    //     // 如果任一条件不满足,标记为false并退出检查
    //     if (currentCount !== requiredValue) {
    //       areAllRequirementsMet = false;
    //       break;
    //     }
    //   }

    //   // 所有条件满足时,设置对应的count值
    //   if (areAllRequirementsMet) {
    //     const setValue = targetConfig.value;
    //     switch(targetKey) {
    //       case 'B':
    //         setCountB(setValue);
    //         break;
    //       case 'C': 
    //         setCountC(setValue);
    //         break;
    //       case 'D':
    //         setCountD(setValue);
    //         break;
    //       case 'E':
    //         setCountE(setValue);
    //         break;
    //     }
    //   }
    // });
  }, [countA, countB, countC, countD]);

  return (
    <div>
      <div>
        <input
          type="text"
          value={countA}
          onChange={(e) => setCountA(Number(e.target.value))}
          placeholder="A"
        />
      </div>
      <div>
        <input
          type="text"
          value={countB}
          onChange={(e) => setCountB(Number(e.target.value))}
          placeholder="B"
        />
      </div>
      <div>
        <input
          type="text"
          value={countC}
          onChange={(e) => setCountC(Number(e.target.value))}
          placeholder="C"
        />
      </div>
      <div>
        <input
          type="text"
          value={countD}
          onChange={(e) => setCountD(Number(e.target.value))}
          placeholder="D"
        />
      </div>
      <div>
        <input
          type="text"
          value={countE}
          onChange={(e) => setCountE(Number(e.target.value))}
          placeholder="E"
        />
      </div>
    </div>
  );
}

export default EffectComponent;
